<template>
    <!-- 小说详情页面 -->
    <div class="content">
        <div class="imgBox">
            <img :src="imgUrl" alt="">
        </div>
        <div>
            <h3>{{ title }}</h3>
            <span>作者:{{ author }}</span>
            <div>
                {{ passage }}
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from "vue"
import { useRoute } from 'vue-router'
const title = ref('')
const author = ref('')
const passage = ref('')
const imgUrl = ref('')
onMounted(() => {
    const route = useRoute()
    title.value = route.query.title
    author.value = route.query.author
    imgUrl.value = route.query.imgUrl
    passage.value = route.query.passage
})

</script>

<style scoped>
.content {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
}

.content .imgBox {
    text-align: center;
    flex: 0 0 15%;
    height: 150px;
}

.content .imgBox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}
</style>

